<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="./css/swiper-3.3.1.min.css" />
		<link rel="stylesheet" type="text/css" href="./css/animate.min.css" />
		<link rel="stylesheet" type="text/css" href="./css/all.css"/>
	</head>
	<body>
		
		<img id="music" src="./images/music.png"/>
		<audio id="get_audio" loop="loop" autoplay="autoplay">
			<source src="m.mp3" />
		</audio>
		<div class="swiper-container">
			<div class="swiper-wrapper">
				<div class="swiper-slide page01">
					<img class="ani" src="./images/page01-04.png" swiper-animate-effect="rollIn" swiper-animate-duration="0.8s" swiper-animate-delay="0s"/>
					<img class="ani" src="./images/page01-03.png" swiper-animate-effect="rollIn" swiper-animate-duration="0.8s" swiper-animate-delay="0s"/>
					<img class="ani" src="./images/page01-01.png" swiper-animate-effect="fadeInDown" swiper-animate-duration="0.8s" swiper-animate-delay="0s"/>
					<img class="ani" src="./images/page01-02.png"/>
					<div class="ani" id="text">陈嘉乐</div>
				</div>
				<div class="swiper-slide page02">
					<img class="ani" src="./images/page02-01.png" swiper-animate-effect="fadeInDown" swiper-animate-duration="0.8s" swiper-animate-delay="0s"/>
					<img class="ani" src="./images/page02-02.png" swiper-animate-effect="fadeInDown" swiper-animate-duration="0.8s" swiper-animate-delay="0s"/>
					<img class="ani" src="./images/page02-03.png" swiper-animate-effect="fadeInLeft" swiper-animate-duration="0.4s" swiper-animate-delay="0.4s"/>
					<img class="ani" src="./images/page02-04.png" swiper-animate-effect="fadeInLeft" swiper-animate-duration="0.4s" swiper-animate-delay="0.8s"/>
					<div class="ani" id="title" swiper-animate-effect="flipInX" swiper-animate-duration="0.8s" swiper-animate-delay="0.8s">基本信息</div>
					<div class="ani" id="info" swiper-animate-effect="flipInX" swiper-animate-duration="0.8s" swiper-animate-delay="1.3s">
						姓名：陈嘉乐
						<br />
						学历：大专
						<br />
						专业：计算机网络
						<br />
						毕业学校：广东科学技术职业学院
						<br />
						联系方式：15989769523
						<br />
						邮箱：383295678@qq.com
					</div>
				</div>
				<div class="swiper-slide page03">
					<img class="ani" src="./images/page03-01.png" swiper-animate-effect="fadeInDown" swiper-animate-duration="0.8s" swiper-animate-delay="0s"/>
					<img class="ani" src="./images/page03-02.png" swiper-animate-effect="fadeInDown" swiper-animate-duration="0.8s" swiper-animate-delay="0s"/>
					<span class="ani" swiper-animate-effect="zoomInUp" swiper-animate-duration="1s" swiper-animate-delay="0s">项目、作品</span>
				</div>
				<div class="swiper-slide page04">
					<img class="ani" src="./images/page04-01.png" swiper-animate-effect="fadeInDown" swiper-animate-duration="0.8s" swiper-animate-delay="0s"/>
					<span class="ani span01" style="height: 60px;" swiper-animate-effect="bounceInDown" swiper-animate-duration="0.5s" swiper-animate-delay="0s"></span>
					<img class="ani sj01" src="./images/page04-sj.png" swiper-animate-effect="bounceInDown" swiper-animate-duration="0.5s" swiper-animate-delay="0.5s"/>
					<span class="ani span02" style="height: 120px;" swiper-animate-effect="bounceInDown" swiper-animate-duration="0.5s" swiper-animate-delay="1s"></span>
					<img class="ani sj02" src="./images/page04-sj.png" swiper-animate-effect="bounceInDown" swiper-animate-duration="0.5s" swiper-animate-delay="1.5s"/>
					<span class="ani span03" style="height: 120px;" swiper-animate-effect="bounceInDown" swiper-animate-duration="0.5s" swiper-animate-delay="2s"></span>
					<img class="ani sj03" src="./images/page04-sj.png" swiper-animate-effect="bounceInDown" swiper-animate-duration="0.5s" swiper-animate-delay="2.5s"/>
					<span class="ani span04" style="height: 90px;" swiper-animate-effect="bounceInDown" swiper-animate-duration="0.5s" swiper-animate-delay="3s"></span>
					<div class="ani pro_info pro_info01" swiper-animate-effect="bounceInRight" swiper-animate-duration="0.5s" swiper-animate-delay="1s">
						<h3>仿fnji电商网站</h5>
						<br />
						独立完成电商的前端网页布局、后端商品管理系统开发、数据库(mysql)优化、服务器(LAMP)搭建。使用的是HD框架，该项目历时六周完成。
					</div>
					<div class="ani pro_info pro_info02" swiper-animate-effect="bounceInRight" swiper-animate-duration="0.5s" swiper-animate-delay="2s">
						<h3>许愿墙</h5>
						<br />
						独立完成该项目的前端布局和jq效果开发，后端管理系统开发，数据库(mysql)优化、服务器(LNMP)搭建。该项目历时5天完成
					</div>
					<div class="ani pro_info pro_info03" swiper-animate-effect="bounceInRight" swiper-animate-duration="0.5s" swiper-animate-delay="3s">
						<h3>个人博客网站</h5>
						<br />
						独立完成该项目的前端布局，后端文章管理系统开发，数据库(mysql)优化、使用服务器(WAMP)。该项目历时两周完成
					</div>
				</div>
				<!--<div class="swiper-slide page05">
					
				</div>-->
				<div class="swiper-slide page06">
					<img src="./images/page06-01.png"/>
					<span style="color: #FFD800; line-height: inherit; font-weight: bold; font-size: 32px; background-color: initial;">感谢观看</span>
					<span style="color: rgb(204, 204, 204); line-height: inherit; font-size: 35px; background-color: initial;">THANK YOU</span>
				</div>
			</div>
		</div>
		<script src="./js/swiper-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="./js/swiper.animate1.0.2.min.js" type="text/javascript" charset="utf-8"></script>
		<script>
			var music = document.getElementById('music');
			var get_audio = document.getElementById('get_audio');
			var t=0;
			music.onclick = function(){
				if(t==0){
					get_audio.pause()
					this.style.animationPlayState = 'paused';
					t=1;
				}else{
					get_audio.play()
					this.style.animationPlayState = 'running';
					t=0;
				}
			}
			var mySwiper = new Swiper('.swiper-container', {
				//垂直滑动
				direction: 'vertical',
				loop: true,
				onInit: function(swiper) { //Swiper2.x的初始化是onFirstInit
					swiperAnimateCache(swiper); //隐藏动画元素 
					swiperAnimate(swiper); //初始化完成开始动画
				},
				onSlideChangeEnd: function(swiper) {
					swiperAnimate(swiper); //每个slide切换结束时也运行当前slide动画
				}
			})
		</script>
	</body>

</html>